<template>
<div>
  <el-page-header style="margin-top: 10px" @back="goBack" content="详情页面"></el-page-header>
<!--  疾病介绍-->
  <div style="padding-top: 20px; border: 1px solid beige; border-radius: 10px; margin-top: 10px;">
      <span style="font-size: 20px; margin-top: 10px; margin-left: 10px">{{ disease.name }}</span> <el-tag style="margin-left: 5px">{{ disease.department.name }}</el-tag>
      <div style="padding-top: 10px; margin-bottom: 10px" class="text-wrapper">
        <p style="padding-top: 5px;padding-left: 10px; color: dimgrey; font-size: 15px; width: 1100px;text-indent: 2em;
        word-wrap:break-word;word-break:break-all;">
          {{ disease.content }}</p><br />
      </div>
  </div>

<!--  医生信息-->
  <h2>相关医生</h2>
  <el-empty description="暂无医生" v-if="physicians.length === 0"></el-empty>
  <div v-else>
  <div style=" border: 1px solid beige; border-radius: 10px; margin-top: 10px; padding-left: 10px">
      <el-row :gutter="5">
        <el-col :span="6" v-for="phy in physicians" :key="phy.id" style="text-align: center">
          <el-card :body-style="{ padding: '0px' }">
            <el-avatar style="margin-top: 10px" shape="circle" :size="100" :src="phy.photo"></el-avatar>
            <!--                <img :src="dep.photo" class="image" style="width: 100px; height: 100px;">-->
            <div style="padding: 14px;">
              <span style="color: #0d6efd">{{phy.nickname }}</span> <span>{{phy.identity}}</span><br/>
              <span class="s1">{{phy.department.name}}</span><br/>
              <span class="s1">{{phy.hospital.name}}</span><br/>
              <!--评分与问诊量-->
              <span class="s1">评分 </span><span class="s1" v-if="phy.score === null">暂无评分</span>
              <span style="color: orange; font-size: 10px">{{phy.score}}</span>
              <span class="s1" style="margin-left: 5px">问诊量 </span><span class="s2" v-if="phy.num === null">0</span>
              <span style="font-size: 10px">{{phy.num}}</span>

              <div class="bottom clearfix" style="border-top: dashed gray 1px; margin-top: 5px">
              <span class="擅长" style="line-height:1.5; font-size: 10px;
                    width: 250px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;"
                    :title="phy.specialty"
              >擅长：{{ phy.specialty }}</span><br/>
                <el-button type="info" plain @click="handleOrder(phy)">挂号</el-button>
                <el-button type="primary" plain @click="handleWen">问诊</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>

    <h2>相关医院</h2>
    <el-empty description="暂无医院" v-if="hospitals.length === 0"></el-empty>
    <div v-else>
      <div style="background-color: white;height: 180px; margin-bottom: 10px; border-bottom: solid 1px #9A9A9A" v-for="hospital in hospitals" :key="hospital.id">
        <div style="float: left;margin-top: 20px; margin-left: 20px">
          <img :src="hospital.picture" width="180" height="130" class="head_pic"/>
        </div>
        <div class="box-card" style="padding-left: 20px; padding-top: 18px; float: left;">
          <el-link type="primary" @click="$router.push({path: '/front/HosInfo',query:{hosId: hospital.id,flag: 'info'}})">{{hospital.name }}</el-link>
          <span style="font-size: 10px; color: dimgrey; margin-left: 10px">{{ hospital.type }}</span>
          <el-tag color="#FFEED1" style="color: #ff9900;font-size: 5px;margin-left: 10px; margin-bottom: 10px">{{ hospital.grade }}</el-tag><br />
          <span style="color: dimgrey">地址：</span><span style="padding-top: 10px">{{ hospital.address }}</span><br />
          <div style="padding-top: 10px" class="text-wrapper">
            <span style="color: dimgrey">电话：</span><span style="padding-top: 10px">{{ hospital.phone }}</span><br />
          </div>
          <div style="padding-top: 10px" class="text-wrapper">
          <span style="width: 900px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;">
            <span style="color: dimgrey;">简介：</span>{{ hospital.outline }}</span><br />
          </div>
        </div>
      </div>
    </div>

</div>
</template>

<script>
export default {
  name: "DisInfo",
  data() {
    return {
      disease: {},
      physicians: {},
      hospitals: {},
      id: this.$route.query.disId
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      this.request.get("/disease/findById?id=" + this.$route.query.disId).then(res => {
        //console.log(res)
        this.disease = res
        this.request.post("/physician/findPhyByDepId?id=" + this.disease.depId).then(res => {
          //console.log(res)
          this.physicians = res
        })
        this.request.post("/hospital/findHosByDep?id=" + this.disease.depId).then(res => {
          console.log(res)
          this.hospitals = res
        })

      })
    },
    handleOrder(phy){
      console.log(phy)
      this.$router.push({path: '/front/phyInfo', query: {physician: phy}})
    },
    handleWen(){
      this.$router.push("/front/im")
    },
    goBack() {
      this.$router.back()
    }
  }
}
</script>

<style scoped>

</style>
